<template>
   <a-table :columns="columns" :data-source="page.list" >
     <template #opr="{ record }"> 
        <a-button @click="convertCredit(record)">兑换</a-button>
     </template>
   </a-table>

    <!-- 兑换窗口 -->
<a-modal v-model:visible="visible2" title="积分兑换" @ok="execChange">
    <a-form
      :model="changeObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="兑换积分">
        <a-input v-model:value="changeObj.credit"  />
      </a-form-item>
    </a-form>
</a-modal>
</template>

<script setup>

import {  reactive, ref } from 'vue';
import { get, del, post, getBlob, tip, removeLocalToken } from "@/common";

//个人积分表
const currPage = ref("credit");
const columns = [
  {
    dataIndex:'user_id',
    title:'用户ID',
  },
  {
    dataIndex:'user_name',
    title:'用户名',
  },
  {
    dataIndex:'credit',
    title:'用户积分',
  },
  {
    dataIndex:'money',
    title:'账户余额',
  },
  {
        key: "opr",
        title: "操作", 

        slots: {
          customRender: "opr", 
        },
  },
];

//分页处理-start
const query = reactive({
});//定义查询参数

const page = ref({});//接收服务端返回的分页对象

//分页引擎
const pagination = reactive({
  current: 1,//当前页
  pageSize: 10,//每页记录数
  total: 0,//总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"],//每页记录下拉框的选型
  showSizeChanger: true,//是否展示每页记录数下拉框
  showQuickJumper: true,//是否展示快速跳转
  showTotal: (total, range) => {//展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

//获取当前分页
const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;

  get('/respondent/convert', query).then(res => {
    page.value = res.data;//将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current=page.value.current
    pagination.pageSize=page.value.pageSize
    pagination.total=page.value.total
    
  });
};
getPage(1);//页面加载是，首先加载第一页

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
    
	pagination.current=pagi.current
  pagination.pageSize=pagi.pageSize
  pagination.total=pagi.total

	getPage(pagination.current)
};
//分页处理-end


//兑换积分部分
const visible2 = ref(false);
const changeObj = reactive({
      user_id: "",
      user_name:"",
      redit:0,
      money:0,
    });

  //打开兑换积分窗口
const convertCredit = (credit) => {
      changeObj.user_id = credit.user_id;
      changeObj.user_name = credit.user_name;
      changeObj.credit = credit.credit;
      changeObj.money = credit.money;
      //打开窗口
      visible2.value = true;
    };
  
  //兑换积分
const execChange = () => {
      //执行兑换
       if(changeObj.credit <= page.value.list[0].credit && changeObj.credit >= 0 && changeObj.credit % 100 ==0){
         console.log(changeObj)
      post("/respondent/convertmoney", changeObj).then((res) => {
        changeObj.user_id = "";
        changeObj.username = "";
        changeObj.credit = 0;
        changeObj.money = 0;
        visible2.value = false;
        tip.success("兑换成功！");
        getPage(page.value.current);
      });
    }else{
      tip.error("失败！");
    }
  };

</script>

<style>

</style>
